<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.filedrop.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Upload File</title>
<script type="text/javascript">
$(document).ready(function(){
	$('#dropzone').filedrop({
    url: 'upload.php',              // upload handler, handles each file separately
    paramname: 'userfile',          // POST parameter name used on serverside to reference file
    data: { 
        param1: 'value1',           // send POST variables
        param2: function(){
            return calculated_data; // calculate data at time of upload
        },
    },
    error: function(err, file) {
        switch(err) {
            case 'BrowserNotSupported':
                alert('browser does not support html5 drag and drop')
                break;
            case 'TooManyFiles':
                // user uploaded more than 'maxfiles'
                break;
            case 'FileTooLarge':
                // program encountered a file whose size is greater than 'maxfilesize'
                // FileTooLarge also has access to the file which was too large
                // use file.name to reference the filename of the culprit file
                break;
            default:
                break;
        }
    },
    maxfiles: 25,
    maxfilesize: 20,    // max file size in MBs
    dragOver: function() {
        // user dragging files over #dropzone
    },
    dragLeave: function() {
        // user dragging files out of #dropzone
    },
    docOver: function() {
        // user dragging files anywhere inside the browser document window
    },
    docLeave: function() {
        // user dragging files out of the browser document window
    },
    drop: function() {
        // user drops file
    },
    uploadStarted: function(i, file, len){
        // a file began uploading
        // i = index => 0, 1, 2, 3, 4 etc
        // file is the actual file of the index
        // len = total files user dropped
    },
    uploadFinished: function(i, file, response, time) {
        // response is the data you got back from server in JSON format.
    },
    progressUpdated: function(i, file, progress) {
        // this function is used for large files and updates intermittently
        // progress is the integer value of file being uploaded percentage to completion
    },
    speedUpdated: function(i, file, speed) {
        // speed in kb/s
    },
    rename: function(name) {
        // name in string format
        // must return alternate name as string
    },
    beforeEach: function(file) {
        // file is a file object
        // return false to cancel upload
    },
    afterAll: function() {
        // runs after all files have been uploaded or otherwise dealt with
    }
});
});
</script>
<style type="text/css">
#upload{
	margin:30px 200px; padding:15px;
	font-weight:bold; font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#f2f2f2;
	color:#3366cc;
	border:1px solid #ccc;
	width:150px;
	cursor:pointer !important;
	-moz-border-radius:5px; -webkit-border-radius:5px;
}
#dropzone p {
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.dropzone1 {
	border: 4px dashed #CCC;
}
.create-new-albumn {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.style85 {
	padding: 3px;
	border: 1px solid #C0C0C0;
	font-family: Georgia;
	font-size: large;
	-webkit-border-radius: 3px;
	outline: none;
	speak-punctuation: none;
	color: #808080;
	font-style: italic;
}
.style851 {	padding: 1px;
	border: 1px solid #C0C0C0;
	font-family: Georgia;
	font-size: large;
	-webkit-border-radius: 3px;
	outline: none;
	speak-punctuation: none;
	color: #808080;
	font-style: italic;
}
.style8511 {padding: 1px;
	border: 1px solid #C0C0C0;
	font-family: Georgia;
	font-size: large;
	-webkit-border-radius: 3px;
	outline: none;
	speak-punctuation: none;
	color: #808080;
	font-style: italic;
}
.style85111 {
	padding: 5px;
	border: 1px solid #C0C0C0;
	font-family: Georgia;
	font-size: large;
	-webkit-border-radius: 3px;
	outline: none;
	speak-punctuation: none;
	color: #808080;
	font-style: italic;
}
.skip-button {
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}
.skip-button a {
	font-style: italic;
}
</style>
</head>

<body>
<div class="dropzone1" id="dropzone" >
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Drag Photos Here  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<p><em><strong>
  <input name="new_albumn" id="email" placeholder="Create A New Album" spellcheck="false" autocomplete="off" style="width: 347px; height: 35px;"  type="text" class="style85111" size="20" />
</strong></em></p>
<p class="skip-button"><a href="home.php">Skip</a></p>

</body>

</html>
